<template>
  <view class="containerDoc">
    <view class="page-container" :style="listHeightStylePage">
      <u-navbar :title="titlesp" placeholder @leftClick="rightClick" :border="false" :shadow="true"></u-navbar>
      <!-- 导航栏 -->
      <view class="topdiv" style="height: 100rpx; flex-shrink: 0;">
        <view class="view-search">
          <u-search placeholder="请输入名称" v-model="keywords" :showAction="false" @change="changeSearch"></u-search>
        </view>
      </view>

      <scroll-view   :refresher-background="'transparent'" :style="listHeightStyle" class="apply-menu" scroll-y="true" :refresher-enabled="true"
                   :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="loadMore">
        <view v-for="(item, index) in list" :key="index" class="list-item" @click="goJumpTo(item)">
          <view class="list-li" v-if="titlesp == '供应商'">
            <view v-for="field in fields" :key="field.value" class="list-item-field">
              <view class="label">{{ field.label }}</view>
              <view class="value">{{ item[field.value] }}</view>
            </view>
          </view>

          <view class="list-li" v-if="titlesp == '申购人'">
            <view v-for="field in fields" :key="field.value" class="list-item-field">
              <view class="label">{{ field.label }}</view>
              <view class="value">{{ item[field.value] }}</view>
            </view>
          </view>

          <view class="list-li" v-if="titlesp == '采购员'">
            <view v-for="field in fields" :key="field.value" class="list-item-field">
              <view class="label">{{ field.label }}</view>
              <view class="value">{{ item[field.value] }}</view>
            </view>
          </view>

          <view class="list-li" v-if="titlesp == '项目'">
            <view v-for="field in fields" :key="field.value" class="list-item-field">
              <view class="label">{{ field.label }}</view>
              <view class="value">{{ item[field.value] }}</view>
            </view>
          </view>

          <view class="list-li" v-if="titlesp == '合同'">
            <view v-for="field in fields" :key="field.value" class="list-item-field">
              <view class="label">{{ field.label }}</view>
              <view class="value">{{ item[field.value] }}</view>
            </view>
          </view>

        </view>

        <!-- 加载中提示 -->
        <view v-if="loading" class="loading-text">
          加载中...
        </view>

        <!-- 没有更多数据提示 -->
        <view v-if="noMore" class="no-more-text">
          没有更多数据了
        </view>

      </scroll-view>



    </view>
  </view>
</template>

<script>
import {useUserStore} from '@/pinia-store/user'
import {mapStores} from 'pinia'
import componentMinxins from '../ComponentMinxins'
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
import org from '@/apis/cloud/org.js'

export default {
  mixins: [componentMinxins, MescrollMixin],
  data() {
    return {
      show: false,
      titlesp: '供应商',
      total: 0,
      queryParams: {
        pageSize: 20,
        pageNum: 1
      },
      list: [],
      keywords: '', //搜索关键字
      currentIndex: 0,
      aloneChecked: [],
      loading: false,
      noMore: false,
      isRefreshing: false,
      listHeight: 0, // 动态计算的高度
      listHeightStyle: {}, // 动态计算的样式
      topHeight: 0,
      listHeightStylePage: {},
      type:0,
      org_id:0,
      materialType:0,
      rawData: null, // 原始数据
      fields: [], // 字段映射规则
      field:null
    }
  },
  onLoad (option) {
    this.type = option.type
    this.org_id = option.org_id
    this.materialType = option.materialType
    this.titlesp = option.name
    this.field = option.field
    this.getInfo();
  },
  onReady() {

  },
  computed: {
    ...mapStores(useUserStore)
  },
  created() {
    // #ifdef H5
    this.listHeightStylePage = {
      height: `${window.innerHeight}px`,
    };
    // #endif

    // #ifdef APP-PLUS
    this.listHeightStylePage = {
      height: `100vh`,
    };
    // #endif
    let app = uni.getSystemInfoSync();
    this.topHeight = app.statusBarHeight;
  },
  mounted() {
    this.calculateListHeight()
  },
  methods: {
    goJumpTo(item){
      if(this.titlesp == '供应商' && this.field == '69'){
          uni.$emit('Selesupplier', { ...item, field:this.field })
      }else if(this.titlesp == '申购人' && this.field == '70'){
        uni.$emit('requisitioner', { ...item, field:this.field })
      }else if(this.titlesp == '采购员' && this.field == '71'){
        uni.$emit('purchaser', { ...item, field:this.field })
      }else if(this.titlesp == '项目' && (this.field == '242' || this.field == '227')){
        uni.$emit('project', { ...item, field:this.field })
      }else if(this.titlesp == '合同' && this.field == '228'){
        uni.$emit('contract', { ...item, field:this.field })
      }

      this.rightClick()
    },
    changeSearch(e) {
      this.list = [];
      this.fields = []
      this.queryParams.pageNum = 1;
      this.noMore = false;
      this.getInfo()
    },
    clickTabs(item) {
      this.list = [];
      this.queryParams.pageNum = 1;
      this.noMore = false;
      this.getInfo();
    },
    calculateListHeight() {
      const windowHeight = window.innerHeight; // 视口高度
      const topHeight = this.topHeight || 0; // 顶部安全高度
      const navbarHeight = 10; // 导航栏高度（假设为 44px）
      const tabsHeight = 88;
      // #ifdef APP-PLUS
      this.listHeightStyle = {
        overflowY: 'hidden'
      };
      // #endif

      // #ifdef H5
      const listHeight = windowHeight - topHeight - navbarHeight - tabsHeight;
      this.listHeightStyle = {
        height: `${listHeight}px`,
        overflowY: 'hidden'
      };
      // #endif
    },

    onRefresh() {
      this.isRefreshing = true; // 开始刷新
      this.list = [];
      this.queryParams.pageNum = 1;
      this.noMore = false;
      return this.getInfo();
    },
    loadMore() {
      if (this.loading || this.noMore) return;
      this.queryParams.pageNum++;
      this.getInfo();
    },
    refreshList() {
      this.list = [];
      this.queryParams.pageNum = 1;
      this.noMore = false;
      return this.getInfo();
    },
    getInfo() {
      // 显示加载框

      if (this.loading) {
        // 隐藏加载框
        uni.hideLoading();
        return
      }
      this.loading = true;

      let jsonData = {
        name: this.keywords,
        page: this.queryParams.pageNum,
        row: this.queryParams.pageSize,
        materialType: 0,
        org_id: 0,
        type: this.type,
      }

      try {
        uni.showLoading({
          title: '加载中'
        });
        org.OrgBaseDatalist(jsonData).then(res => {
          if (res.status > 0) {
            this.fields = res.field
            this.list = this.queryParams.pageNum === 1 ? res.data : [...this.list, ...res.data];
            this.total = res.count;
            if (this.list.length >= this.total) {
              this.noMore = true;
            }
            this.isRefreshing = false;
            this.loading = false;
            uni.hideLoading();
          } else {
            this.loading = false;
            this.noMore = true;
            this.isRefreshing = false;
            uni.hideLoading();
          }
        })
      } catch (err) {
        uni.hideLoading();
        this.loading = false;
        this.isRefreshing = false;
        console.error('请求失败', err);
      } finally {
      }
    },

    openPopup() {
      this.show = true;
    },
    rightClick() {
      uni.navigateBack({ delta: 1 });
    },
    search() {

    },
  }
}
</script>

<style lang="scss" scoped>
.title-container {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 16rpx; /* 复选框和标题之间的间距 */
  margin-bottom: 10rpx; /* 标题与下方内容的间距 */
}

.list-item-field {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 15rpx; /* 字段之间的间距 */

  .label {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333; /* 深色字体 */
    min-width: 160rpx; /* 固定宽度，避免错位 */
    margin-right: 20rpx; /* label 和 value 之间的间距 */
  }

  .value {
    font-size: 28rpx;
    color: #666666; /* 浅色字体 */
    flex: 1; /* 占据剩余空间 */
    word-break: break-all; /* 长文本自动换行 */
  }
}

.title-text {
  font-size: 32rpx; /* 标题字体大小 */
  font-weight: bold; /* 加粗显示 */
  color: #333; /* 标题颜色 */
  flex: 1; /* 占据剩余空间 */
  overflow: hidden; /* 防止文本溢出 */
  text-overflow: ellipsis; /* 省略号处理长文本 */
  white-space: nowrap; /* 禁止换行 */
}
.containerDoc{
  background-color: #ffffff;
}
::v-deep .u-tabs__wrapper {
  background-color: white;
}

.view-search {
  background-color: white;

  .search {
    padding: 10rpx 0rpx 10rpx 0rpx;
  }

  ::v-deep .u-search__content {
    margin: 20rpx 20rpx 20rpx 20rpx !important;
  }
}

.list-li {
  margin-left: 30rpx;
  padding-top: 20rpx;
  padding-bottom: 10rpx;
}

::v-deep .u-divider {
  margin: 10px 0px 0px 0px;
}

.topdiv {
  flex-shrink: 0;
  /* 固定高度，不被压缩 */
  background-color: white;
  z-index: 1;
  /* 防止被内容覆盖 */
}

.popup {
  padding: 36rpx 0rpx;

  .popup-content {
    margin: 20rpx 10rpx 20rpx 40rpx;
  }
}

.input-first {
  border: 1rpx solid #dadbde;
  display: inline-block;
  width: 420rpx;

  background-color: white !important;
}

.input {
  border: 1rpx solid #dadbde;
  display: inline-block;
  width: 420rpx;
  pointer-events: none;
  background-color: white !important;
}

.span {
  display: inline-block;
  width: 230rpx;
}

.btn {
  display: inline-block;
  width: 280rpx;
  margin-right: 50rpx;
}

.btnS {
  display: inline-block;
  width: 280rpx;
}

.bottom-btn {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 90vw;
}

.check-data-container {
  display: flex;
  flex-wrap: wrap; // 如果内容过多则自动换行
  gap: 20rpx; // 设置间距
  padding: 20rpx;
  background-color: #ffffff;
}

.check-data-item {
  display: flex;
  align-items: center; // 垂直居中
  justify-content: center; // 水平居中
  background-color: #f5f7fa; // 背景色
  border: 1rpx solid #dcdfe6; // 边框
  border-radius: 10rpx; // 圆角
  padding: 10rpx 20rpx; // 内边距
  font-size: 28rpx; // 字体大小
  color: #333; // 字体颜色
  cursor: pointer; // 鼠标悬停时显示手型

  &:hover {
    background-color: #e6f7ff; // 鼠标悬停背景色
    border-color: #91d5ff; // 鼠标悬停边框颜色
  }
}


/* 标题 */
.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

/* 申请人信息 */
.applicant {
  font-size: 26rpx;
  color: #767676;
  margin-bottom: 10rpx;
}

/* 提示信息 */
.tip {
  font-size: 26rpx;
  color: #767676;
  margin-bottom: 10rpx;
}

/* 时间信息 */
.time-info {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #767676;
  margin-bottom: 10rpx;
}

/* 审批状态 */
.status {
  margin-top: 10rpx;
  font-size: 28rpx;
  font-weight: bold;
}

/* 动态状态样式 */
.status-1 {
  color: #3c9cff; // 审批中
}

.status-2 {
  color: #5ac725; // 审批同意
}

.status-3 {
  color: #f56c6c; // 审批驳回
}

.status-4 {
  color: #909399; // 审批撤销
}

/* 加载中和无更多数据提示 */
.loading-text,
.no-more-text {
  margin-top: 20rpx;
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 28rpx;
}

.custom-btn {
  width: 320rpx;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  padding: 10px 20px;
  /* 调整内边距 */
  height: 80rpx;
  /* 固定高度 */
  line-height: normal;
  /* 避免文字偏移 */

  &.primary-btn {
    background-color: #007aff;
    /* 自定义主色调 */
    color: white;
    /* 文字颜色 */
  }
}

.page-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 禁止页面滚动 */
}


::v-deep .u-tabs__wrapper {
  background-color: white;
}

.view-search {
  background-color: white;

  .search {
    padding: 10rpx 0rpx 10rpx 0rpx;
  }

  ::v-deep .u-search__content {
    margin: 20rpx 20rpx 20rpx 20rpx !important;
  }
}

.list-li {
  //margin-left: 30rpx;
  //margin-right: 30rpx;
  padding: 20rpx;
  padding-bottom: 10rpx;
}

::v-deep .u-divider {
  margin: 10px 0px 0px 0px;
}

.apply-menu {
  background-color: #f2f2f2;
  padding-top: 0rpx;
  overflow-y: auto;
}

.list-item {
  border-radius: 20rpx;
  margin: 20rpx;
  background-color: #fff;
}

.topdiv {
  flex-shrink: 0;
  /* 固定高度，不被压缩 */
  background-color: white;
  z-index: 1;
  /* 防止被内容覆盖 */

  .view-search {
    background-color: white;

    ::v-deep .u-search__content {
      background-color: white;
    }
  }
}

.popup {
  padding: 36rpx 0rpx;

  .popup-content {
    margin: 20rpx 10rpx 20rpx 40rpx;
  }
}

.input-first {
  border: 1rpx solid #dadbde;
  display: inline-block;
  width: 420rpx;

  background-color: white !important;
}

.input {
  border: 1rpx solid #dadbde;
  display: inline-block;
  width: 420rpx;
  pointer-events: none;
  background-color: white !important;
}

.span {
  display: inline-block;
  width: 230rpx;
}

.btn {
  display: inline-block;
  width: 280rpx;
  margin-right: 50rpx;
}

.btnS {
  display: inline-block;
  width: 280rpx;
}
</style>
